<template>
	<!-- 拜访记录 -->
	<HeaderNavTabarVue title="拜访历史记录">
	</HeaderNavTabarVue>
	
	<!-- 列表 -->
	<view class="main">
		<view class="list-box">
			<view class="list" v-for="(item,index) in cardDataList" :key="index" @click="toDetail(item)">
				<view class="row">
					<view class="row-left">客户名称</view>
					<view class="row-right">{{item.customerName}}</view>
				</view>
				<view class="row">
					<view class="row-left">{{item.underwayOutcome === '已完成' ? '完成时间' : '跟进时间'}}</view>
					<view class="row-right">{{item.updateTime}}</view>
				</view>
				<view class="row">
					<view class="row-left">拜访方式</view>
					<view class="row-right">{{item.visitWay}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		defineProps,
		onMounted,
		ref
	} from 'vue'
	import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
	import {
		getTitleBarHeight
	} from '@/utils/system.js'
	import AuditCard from '@/components/audit/AuditCard.vue'
	import dayjs from 'dayjs'
	import {
		getAttendanceApplyApi,
		getSelectApproveCount,
		getSelectApproveList,
	} from '@/api/attendance'
	import {
		getUserProfile
	} from '@/api/system/user'
	import {
		getVisitListApi
	} from '@/api/visit.js'

	const showBottonNaviBar = ref(true)
	const removeBottomNaviBar = (val) => {
		showBottonNaviBar.value = val
	}
	const props = defineProps(['id'])

	const searchValue = ref(null)
	const customerId = ref(0)
	let pageNum = ref(1)
	let pageSize = ref(10)
	let totals = ref(888)
	let statusLoding = ref(false)

	//顶部分段器
	const items2 = ref(['全部', '跟进中', '已完成'])
	const current = ref(0)
	const typeGenJin = ref('') // 全部‘’ 跟进中 已完成


	const updatedCard = async () => {
		await typeChange()
	}
	const userId = ref(null)
	const cardDataList = ref([])

	const getUserProfileFn = async () => {
		let {
			code,
			data
		} = await getUserProfile()
		if (code === 200) {
			userId.value = data.userId
		}
	}

	// 分页接口对接
	const typeChange = async (flag) => {

		// 调取筛选
		let params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			customerId: customerId.value,
			userId: userId.value
		}
		// console.log(params,' params')

		let {
			rows,
			code,
			total
		} = await getVisitListApi(params)
		try {
			if (code === 200) {
				if (statusLoding.value) {
					statusLoding.value = false //加载中状态
				}
				if (flag) {
					cardDataList.value = [...cardDataList.value, ...rows]
				} else {
					cardDataList.value = rows
				}
				totals.value = total
			}
		} catch {}
	}

	const scrolltolower = async () => {
		statusLoding.value = true //加载完状态
		let allTotal = pageNum.value * pageSize.value
		if (allTotal < totals.value) {
			pageNum.value++
			typeChange(true)
		} else {
			uni.showToast({
				title: '数据加载完毕',
			})
			statusLoding.value = false
		}
	}

	onPullDownRefresh(async () => {
		pageNum.value = 1
		await typeChange(false)
		// 关闭下拉刷新
		uni.stopPullDownRefresh()
	})
	const searchPersonData = ref(null)

	function debounce(func, wait) {
		let timeout
		return function(...args) {
			const context = this
			clearTimeout(timeout)
			timeout = setTimeout(() => func.apply(context, args), wait)
		}
	}

	let debounceSearch = debounce(function() {
		console.log(searchPersonData.value)
		// let params = {
		//   pageNum:1,
		//   pageSize: 10000,
		//   nickName: searchData.value,
		// }
		// let {code,rows} = await getDeptTree(params)
		// if(code === 200) {
		//   searchPerson.value = rows
		// }
	}, 500)

	const searchPerson = (v) => {
		searchPersonData.value = v
		// 掉搜索接口
		debounceSearch()
	}

	// 跳转详情
	const toDetail = (item) => {
		// status 1 申请拜访 2 跟进状态详情 3 历史记录详情
		uni.navigateTo({
			url: '/pages/visit/customerVisit?status=3&item=' + JSON.stringify(item)
		})
	}

	onShow(async () => {
		await getUserProfileFn()
		await typeChange(false)
	})

	onLoad(async (props) => {
		if (Number(props.customerId)) {
			customerId.value = Number(props.customerId)
		}
	})
</script>

<style lang="scss" scoped>
	@import '/static/style/index.scss';
	.main{
		padding: 32rpx;
		.list-box{
			.list{
				background-color: #fff;
				border-radius: 16rpx;
				padding: 32rpx;
				margin-bottom: 32rpx;
				.row{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 32rpx;
					
					.row-left{
						color: #86909C;
					}
				}
				
				.row:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
</style>